<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const hotels = ref([])
const loading = ref(false)
const error = ref(null)

const selectedCity = ref('北京')
const showCityPicker = ref(false)
const showDatePicker = ref(false)
const checkInDate = ref(new Date())
const checkOutDate = ref(new Date(Date.now() + 24 * 60 * 60 * 1000))
const pendingCheckIn = ref(checkInDate.value.toISOString().split('T')[0])
const pendingCheckOut = ref(checkOutDate.value.toISOString().split('T')[0])
const searchKeyword = ref('')
const activeFilter = ref('价格星级')
const filterOptions = ['筛选', '区域位置', '价格星级', '智能排序']

const hotCities = [
  '北京',
  '广州',
  '上海',
  '深圳',
  '香港',
  '澳门',
  '成都',
  '重庆',
  '长沙',
  '西安',
  '杭州',
  '东莞',
  '南京',
  '武汉',
  '苏州',
  '南昌',
  '贵阳',
  '南宁',
  '昆明',
  '佛山'
]

const cityIndex = [
  ['A', ['安顺', '安吉县', '安阳', '鞍山', '安庆', '阿尔山']],
  ['B', ['北海', '包头', '蚌埠', '毕节', '保山']],
  ['C', ['长沙', '成都', '重庆', '常州', '沧州']],
  ['D', ['大连', '东莞', '敦煌', '大理']],
  ['G', ['广州', '贵阳', '桂林', '赣州']],
  ['H', ['杭州', '呼和浩特', '合肥', '哈尔滨']],
  ['J', ['济南', '嘉兴', '锦州', '景德镇']],
  ['K', ['昆明', '喀什', '克拉玛依']],
  ['L', ['拉萨', '临沂', '廊坊', '聊城']],
  ['M', ['绵阳', '梅州']],
  ['N', ['南京', '南昌', '南宁', '宁波']],
  ['P', ['攀枝花', '平遥']],
  ['Q', ['青岛', '泉州', '秦皇岛']],
  ['S', ['上海', '深圳', '苏州', '绍兴']],
  ['T', ['天津', '太原', '台州']],
  ['W', ['武汉', '无锡', '温州', '威海']],
  ['X', ['西安', '厦门', '徐州', '西宁']],
  ['Y', ['银川', '烟台', '宜昌']],
  ['Z', ['郑州', '珠海', '中山', '遵义']]
]

function formatDate(date, { includeWeekday = false } = {}) {
  if (!(date instanceof Date)) {
    date = new Date(date)
  }
  if (Number.isNaN(date.getTime())) {
    return ''
  }
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  if (!includeWeekday) {
    return `${month}-${day}`
  }
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return `${month}-${day} ${weekdays[date.getDay()]}`
}

function toNumber(value) {
  const number = Number(value)
  return Number.isFinite(number) ? number : null
}

function getHotelTags(hotel) {
  if (!hotel) {
    return []
  }
  if (Array.isArray(hotel.facilities)) {
    return hotel.facilities.filter(Boolean)
  }
  if (typeof hotel.facilities === 'string' && hotel.facilities.trim()) {
    return hotel.facilities
      .split(/[,，;；、\s]+/)
      .map(item => item.trim())
      .filter(Boolean)
  }
  return []
}

function getRatingValue(hotel) {
  return (
    toNumber(hotel?.score) ??
    toNumber(hotel?.rating) ??
    toNumber(hotel?.average_rating) ??
    toNumber(hotel?.star_rating)
  )
}

function formatScore(hotel) {
  const score = getRatingValue(hotel)
  if (score) {
    return score.toFixed(1)
  }
  return '4.5'
}

function getRatingDescription(hotel) {
  const score = getRatingValue(hotel)
  if (score) {
    if (score >= 4.8) return '超棒'
    if (score >= 4.5) return '很棒'
    if (score >= 4.2) return '不错'
  }
  return '舒适'
}

function getReviewSummary(hotel) {
  const count =
    toNumber(hotel?.review_count) ??
    toNumber(hotel?.comment_count) ??
    toNumber(hotel?.comments)
  if (count && count > 0) {
    return `${count}条评价`
  }
  return '评价较少'
}

function getLandmarkLabel(hotel) {
  return hotel?.landmark || hotel?.business_district || hotel?.address || ''
}

function getMainImage(hotel) {
  if (hotel?.images && hotel.images.length > 0) {
    const mainImage = hotel.images.find(img => img.is_main)
    return mainImage ? mainImage.image_url : hotel.images[0].image_url
  }
  return 'https://via.placeholder.com/300x200?text=Hotel'
}

const nightCount = computed(() => {
  const diff = checkOutDate.value.getTime() - checkInDate.value.getTime()
  return Math.max(1, Math.round(diff / (24 * 60 * 60 * 1000)))
})

const checkInLabel = computed(() =>
  formatDate(checkInDate.value, { includeWeekday: true })
)
const checkOutLabel = computed(() =>
  formatDate(checkOutDate.value, { includeWeekday: true })
)
const displayHotels = computed(() => {
  let list = Array.isArray(hotels.value) ? [...hotels.value] : []

  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase()
    list = list.filter(hotel =>
      `${hotel?.hotel_name ?? ''} ${hotel?.address ?? ''}`
        .toLowerCase()
        .includes(keyword)
    )
  }

  return list
})

const totalHotels = computed(() => displayHotels.value.length)

const isKeywordActive = computed(() => searchKeyword.value.trim().length > 0)

function setActiveFilter(option) {
  activeFilter.value = option
}

function openCityPicker() {
  showCityPicker.value = true
}

function closeCityPicker() {
  showCityPicker.value = false
}

function selectCity(city) {
  selectedCity.value = city
  closeCityPicker()
}

function openDatePicker() {
  pendingCheckIn.value = checkInDate.value.toISOString().split('T')[0]
  pendingCheckOut.value = checkOutDate.value.toISOString().split('T')[0]
  showDatePicker.value = true
}

function closeDatePicker() {
  showDatePicker.value = false
}

function confirmDateSelection() {
  const start = new Date(pendingCheckIn.value)
  const end = new Date(pendingCheckOut.value)
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    closeDatePicker()
    return
  }
  if (end <= start) {
    end.setDate(start.getDate() + 1)
  }
  checkInDate.value = start
  checkOutDate.value = end
  closeDatePicker()
}

// 获取所有酒店
const fetchHotels = async () => {
  loading.value = true
  error.value = null

  const controller = new AbortController()
  const timeoutId = setTimeout(() => controller.abort(), 10000)

  try {
    const response = await fetch('http://localhost:8000/orders/hotel', {
      method: 'GET',
      signal: controller.signal
    })

    clearTimeout(timeoutId)

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const data = await response.json()

    if (data.code === 200) {
      const hotelList = Array.isArray(data.data) ? data.data : []
      hotels.value = hotelList
    } else {
      error.value = data.message || '获取酒店列表失败'
      hotels.value = []
    }
  } catch (err) {
    clearTimeout(timeoutId)

    if (err.name === 'AbortError') {
      error.value = '请求超时，请稍后重试'
    } else {
      error.value = '网络错误，请稍后重试'
    }
    hotels.value = []
  } finally {
    loading.value = false
  }
}

// 点击酒店，进入详情页
const handleHotelClick = hotel => {
  router.push({ name: 'hotel-detail', params: { id: hotel.id } })
}

onMounted(() => {
  fetchHotels()
})
</script>

<template>
  <div class="hotel-list-page">
    <header class="top-bar">
      <div class="top-row">
        <button class="nav-icon" type="button" @click="router.back()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <div class="location-info">
          <button class="city-line" type="button" @click="openCityPicker">
            <span class="city-name">{{ selectedCity }}</span>
            <span class="city-arrow">▼</span>
          </button>
          <button class="date-line" type="button" @click="openDatePicker">
            {{ checkInLabel }} - {{ checkOutLabel }} · {{ nightCount }}晚
          </button>
        </div>
        <div class="nav-actions">
          <button class="nav-icon" type="button">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
          </button>
          <button class="nav-icon" type="button">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="5" r="2" stroke="currentColor" stroke-width="2" />
              <circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="2" />
              <circle cx="12" cy="19" r="2" stroke="currentColor" stroke-width="2" />
            </svg>
          </button>
        </div>
      </div>

      <div class="search-row">
        <div class="search-input-wrapper">
          <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 15.5L20 20" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" />
            <circle cx="11" cy="11" r="6" stroke="#8c8c8c" stroke-width="2" />
          </svg>
          <input
            v-model="searchKeyword"
            class="search-input"
            type="text"
            placeholder="地点/品牌/酒店名称"
          />
          <button
            v-if="isKeywordActive"
            class="clear-btn"
            type="button"
            @click="searchKeyword = ''"
          >
            ×
          </button>
        </div>
        <button class="map-btn" type="button" @click="fetchHotels">搜索</button>
      </div>

      <div class="filter-row">
        <button
          v-for="option in filterOptions"
          :key="option"
          class="filter-btn"
          :class="{ active: option === activeFilter }"
          type="button"
          @click="setActiveFilter(option)"
        >
          {{ option }}
        </button>
      </div>

    </header>

    <main class="hotels-section">
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="error" class="error-container">
        <p>{{ error }}</p>
        <button class="retry-btn" type="button" @click="fetchHotels">重试</button>
      </div>

      <template v-else>
        <div class="list-indicator" v-if="totalHotels > 0">
          共{{ totalHotels }}家酒店
        </div>
        <div v-if="totalHotels === 0" class="empty-container">
          暂无符合条件的酒店
        </div>
        <div v-else class="hotel-list">
          <article
            v-for="(hotel, index) in displayHotels"
            :key="hotel.id"
            class="hotel-card"
            @click="handleHotelClick(hotel)"
          >
            <div class="hotel-cover">
              <img :src="getMainImage(hotel)" :alt="hotel.hotel_name || '酒店封面'" />
              <div v-if="index === 0" class="total-badge">共{{ totalHotels }}家酒店</div>
            </div>
            <div class="hotel-content">
              <div class="hotel-title-line">
                <h3 class="hotel-title">{{ hotel.hotel_name }}</h3>
              </div>
              <div class="hotel-rating-line">
                <span class="rating-score">{{ formatScore(hotel) }}</span>
                <span class="rating-text">{{ getRatingDescription(hotel) }}</span>
                <span class="rating-count">{{ getReviewSummary(hotel) }}</span>
              </div>
              <div v-if="getLandmarkLabel(hotel)" class="hotel-meta-line">
                <span>{{ getLandmarkLabel(hotel) }}</span>
              </div>
              <div class="hotel-tags">
                <span
                  v-for="tag in getHotelTags(hotel).slice(0, 4)"
                  :key="tag"
                  class="tag-item"
                >
                  {{ tag }}
                </span>
              </div>
              <div class="price-section">
                <div class="price-info">
                  <span class="price-symbol">¥</span>
                  <span class="price-amount">{{ hotel.price }}</span>
                  <span class="price-unit">起</span>
                  <span class="price-night">/晚</span>
                </div>
                <div class="price-status" :class="{ 'sold-out': hotel.stock <= 0 }">
                  {{ hotel.stock > 0 ? '含税价·实时确认' : '已售罄' }}
                </div>
              </div>
            </div>
          </article>
        </div>
      </template>
    </main>

    <div v-if="showDatePicker" class="overlay">
      <div class="modal">
        <header class="modal-header">
          <h3>选择日期</h3>
          <button class="close-modal-btn" type="button" @click="closeDatePicker">×</button>
        </header>
        <div class="modal-body">
          <label class="modal-label">
            入住日期
            <input v-model="pendingCheckIn" type="date" class="modal-date-input" />
          </label>
          <label class="modal-label">
            离店日期
            <input v-model="pendingCheckOut" type="date" class="modal-date-input" />
          </label>
        </div>
        <footer class="modal-footer">
          <button class="modal-btn secondary" type="button" @click="closeDatePicker">取消</button>
          <button class="modal-btn primary" type="button" @click="confirmDateSelection">确定</button>
        </footer>
      </div>
    </div>

    <div v-if="showCityPicker" class="overlay">
      <div class="modal city-modal">
        <header class="modal-header">
          <h3>选择城市</h3>
          <button class="close-modal-btn" type="button" @click="closeCityPicker">×</button>
        </header>
        <div class="modal-body city-body">
          <div class="city-section">
            <h4 class="city-subtitle">热门城市</h4>
            <div class="city-grid">
              <button
                v-for="city in hotCities"
                :key="city"
                class="city-chip"
                :class="{ active: city === selectedCity }"
                type="button"
                @click="selectCity(city)"
              >
                {{ city }}
              </button>
            </div>
          </div>
          <div class="city-section">
            <h4 class="city-subtitle">全部城市</h4>
            <div class="city-index">
              <div v-for="[letter, cities] in cityIndex" :key="letter" class="city-group">
                <div class="city-letter">{{ letter }}</div>
                <div class="city-names">
                  <button
                    v-for="city in cities"
                    :key="city"
                    class="city-name-btn"
                    type="button"
                    @click="selectCity(city)"
                  >
                    {{ city }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hotel-list-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
  padding-bottom: 32px;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #ffffff;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  border-radius: 0 0 20px 20px;
}

@media (min-width: 768px) {
  .top-bar {
    width: clamp(320px, 25vw, 420px);
    margin: 0 auto;
  }
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-icon {
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.nav-icon svg {
  display: block;
}

.location-info {
  flex: 1;
  margin: 0 12px;
  color: #0f172a;
}

.city-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  color: #0f172a;
  cursor: pointer;
}

.city-line:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 2px;
}

.city-arrow {
  font-size: 12px;
  color: #64748b;
}

.date-line {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.date-line:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 2px;
}

.nav-actions {
  display: flex;
  gap: 8px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 16px;
  padding: 0 12px;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.search-icon {
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
}

.search-input::placeholder {
  color: #94a3b8;
}

.clear-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  padding: 0 4px;
  cursor: pointer;
}

.map-btn {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.filter-btn {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 12px;
}

.filter-btn.active {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
}

.hotels-section {
  padding: 20px 16px 32px;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #64748b;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.error-container p {
  margin-bottom: 16px;
  color: #ef4444;
}

.retry-btn {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.25);
}

.list-indicator {
  position: relative;
  top: -8px;
  align-self: flex-start;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
}

.hotel-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hotel-card {
  display: flex;
  gap: 12px;
  background: #ffffff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hotel-card:active {
  transform: translateY(2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.hotel-cover {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.hotel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.total-badge {
  position: absolute;
  bottom: 8px;
  left: 10px;
  background: rgba(6, 182, 212, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  box-shadow: 0 6px 12px rgba(6, 182, 212, 0.3);
}

.hotel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hotel-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hotel-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.hotel-rating-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.rating-score {
  font-size: 18px;
  font-weight: 700;
  color: #1d4ed8;
}

.rating-text {
  font-weight: 600;
}

.rating-count {
  color: #94a3b8;
}

.hotel-meta-line {
  font-size: 11px;
  color: #64748b;
}

.hotel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-item {
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.price-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #ef4444;
}

.price-symbol {
  font-size: 13px;
  font-weight: 600;
}

.price-amount {
  font-size: 22px;
  font-weight: 700;
}

.price-unit,
.price-night {
  font-size: 11px;
  color: #94a3b8;
}

.price-status {
  font-size: 11px;
  color: #475569;
  background: rgba(148, 163, 184, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}

.price-status.sold-out {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  background: #fff;
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}

.city-modal {
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #94a3b8;
  cursor: pointer;
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.city-body {
  overflow-y: auto;
  gap: 24px;
}

.modal-label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #475569;
  gap: 8px;
}

.modal-date-input {
  border: 1px solid #cbd5f5;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a;
  background: #f8fafc;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #e2e8f0;
}

.modal-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
}

.modal-btn.primary {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.modal-btn.secondary {
  background: #e2e8f0;
  color: #475569;
}

.city-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.city-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

.city-chip {
  background: #f1f5f9;
  color: #334155;
  border: none;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.city-chip.active {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
  font-weight: 600;
}

.city-index {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.city-group {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.city-letter {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  width: 24px;
}

.city-names {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.city-name-btn {
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #334155;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.city-name-btn:hover,
.city-chip:hover {
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.city-name-btn:active,
.city-chip:active {
  transform: translateY(1px);
}

@media (min-width: 768px) {
  .hotel-list-page {
    padding-bottom: 48px;
  }

  .top-bar {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 0 0 24px 24px;
  }

  .hotels-section {
    max-width: 720px;
    margin: 0 auto;
  }

  .hotel-card {
    gap: 18px;
    padding: 16px;
  }

  .hotel-cover {
    width: 180px;
    height: 140px;
  }

  .hotel-title {
    font-size: 18px;
  }
}
</style>

